(function (window, angular) {
    'use strict';
    //1. 分析整体界面
    //2. 编写angular代码
    //3. 引用angularjs文件
    //4. 创建模块和控制器
    //5. 写angular的业务逻辑代码
    //6.完成主体（增删改查 Ceate Read Updata Delete）功能
    //7. 完成子功能（全选切换，未完成数量统计，数据的过滤，删除已完成的数据）
    var app = angular.module('todoApp', []);
    app.controller('todoCtrl', function ($scope,$filter) {
        //查、增、删、改
        $scope.todoList = [
            {id: Math.random(), text: 'hello1', isCompleted: true},
            {id: Math.random(), text: 'hello2', isCompleted: false},
        ];
        //初始化输入框的值
        $scope.text = "";
        //第一个输入框自动获取焦点
        //增加
        //用表单form的ng-submit
        $scope.add = function () {

            //代码只执行一次,因此要添加监听
            console.log($scope.text.length);
            //不为空格和空的时候才push
            if ($scope.text.length > 0) {
                $scope.todoList.push({id: Math.random(), text: $scope.text, isCompleted: false});
                //清空输入框
                $scope.text = "";
            }
        }

        //删除
        //删除索引对应的值
        $scope.del = function (item) {
            //console.log(item);
            //数组也有IndexOf方法,类似于字符串
            var idx=$scope.todoList.indexOf(item);
            //console.log(idx);
            //根据下标删除数据,由于数据是双项绑定,且触发了angular里面的事件,angular会动态的更新
            $scope.todoList.splice(idx,1);
        }

        //改
        //双击对应的可以进行编辑
        $scope.edit= function (item) {
            //双击的时候将所点击的li的id赋给一个变量,然后angular遍历html进行渲染时,第一个li的id刚好等于这个
            //全局变量,而第二个的id就不等于这个全局变量,就不会添加editing这个样式
            $scope.editingID=item.id;
            //第二个输入框自动获焦?
        }
        //编辑完之后失焦回到原点
        $scope.edited= function (item) {
            $scope.editingID=-1;
            //如果没有文字了调用上面的删除方法,删掉这一行
            if(item.text.length==0){
                $scope.del(item);
            }
        }

        /*子功能*/
            // 未完成数量统计,只要有数据变化,里面的回调函数就会执行
            $scope.$watch('todoList', function (newValue, oldValue) {
                $scope.todoCount=$filter('filter')(newValue,{isCompleted:false}).length;
                //如果当前数据没有被选中的checkbox就隐藏,否则就显示
                $scope.isCompletedShow=$filter('filter')(newValue,{isCompleted:true}).length<=0?false:true;
                //数据都米有的时候大家就都隐藏
                $scope.isAllShow=newValue.length>0?true:false;
                console.log($scope.isAllShow);
                //全选按钮: 根据todoCount,如果当前有0个说明都被选中了剩0个,则全选按钮选中,反之同理
                $scope.allToggle=!$scope.todoCount;
            },true);

        // 删除已完成的数据
            $scope.todoClearCompleted= function () {
                //重新给todoList这个数组赋值,即未完成的
                $scope.todoList=$filter('filter')($scope.todoList,{isCompleted:false});
                }
        //切换状态,同时改变样式(红色的那个边框)
        //定义过滤器的初始值为空对象,这样相当于不过滤
        $scope.todoFilter={};
        $scope.todoChangeFilter= function (num) {
            switch(num){
                case 1:
                    $scope.todoFilter={isCompleted:false};
                    //switch中的case记得都要break!!
                    break;
                case 2:
                    $scope.todoFilter={isCompleted:true};
                    break;
                default:
                    //其他参数就变成默认的,不筛选
                    $scope.todoFilter={};
            }
        }
        
        //全选事件
        $scope.todoAllChoose= function () {
            /*//代码较多但逻辑比较简单,但是没有实现双向绑定
            //遍历对象
            $scope.flag=false;
            var count=0;
            angular.forEach($scope.todoList, function (val,key) {
                if(val.isCompleted==true){
                    count++;
                }
            })
            console.log(count);
            if(count<$scope.todoList.length){
                //说明没有全选,那么让所有的都选中
                angular.forEach($scope.todoList, function (val,key) {
                    val.isCompleted=true;
                })
            }else{
                //说明全部选中了,那么让所有的都不选中
                angular.forEach($scope.todoList, function (val,key) {
                    val.isCompleted=false;
                })
            }*/

            //巧方法,但不容易想到:由于全选按钮其实质是一个checkbox,借助$scope.todoCount,在监听器里
            angular.forEach($scope.todoList, function (val, key) {
                val.isCompleted=$scope.allToggle ;
            })
        }
    })
})(window, angular);
